<template>
	<view class="pt-20 plr-30 bg white min100">
		
		<view class="deposit-head flex1">
			<view @click="changeType(item.type)" class="deposit-head-li flex1 flex-center flex-middle" :class="{active:current == item.type}" v-for="(item,index) in list" :key="index">
				<image :src="item.image" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		
		<view class="mt-30 mb-30 bg-1 radius-20 pl-30 pr-30 pt-30">
			<view class="size-30 white">提现金额</view>
			<u-field v-model="from.account" @input="changeReal" label-width="0" placeholder="请输入提现金额" /></u-field>
			<view class="white pt-30 pb-30 size-24 flex">
				<view>可用余额:{{ walletAccount }}</view>
				<view>手续费:{{ withdrawConfig.rate }}%</view>
			</view>
		</view>
		
		<view class="radius-20 bg-1 pl-30 pr-30" v-if="current != 3">
			<u-field v-model="from.nickname" label="姓名" label-width="180" input-align="right" placeholder="请输入您的姓名">
			</u-field>
			<u-field v-model="from.phone" type="number" label="电话" maxlength="11" label-width="180" input-align="right" placeholder="请输入您的电话">
			</u-field>
			<u-field v-model="from.captcha" type="number" maxlength="6" label-width="0" placeholder="请填写验证码">
				
				<u-button size="mini" hover-class="none" class="code-btn"  slot="right" :custom-style="customStyle" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			<u-field v-model="from.name" v-if="current == 0" label="微信账号" maxlength="11" label-width="180" input-align="right" placeholder="请输入微信账号"></u-field>
			<u-field v-model="from.name" label="支付宝号" v-else maxlength="11" label-width="180" input-align="right" placeholder="请输入您的支付宝号">
			</u-field>
			<view class="pt-30 pb-30 flex">
				<view class="">
					<view class="size-28 white">{{ current == 0 ? '微信' : '支付宝' }}收款码</view>
					<view class="size-26 color-9 mt-10">上传您的收款码</view>
				</view>
				<image v-if="from.image" @click="chooseImg" :src="from.image" mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
				<image @click="chooseImg" v-else src="/static/ipload.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
			</view>
		</view>
		
		<view class="radius-20 bg-1 pl-30 pr-30" v-else>
			<u-field v-model="from.nickname" label="真实姓名" label-width="180" input-align="right" placeholder="请输入您的姓名">
			</u-field>
			<u-field v-model="bankMessage.identity" label="身份证号" label-width="180" input-align="right" placeholder="请输入身份证号">
			</u-field>
			<u-field @click="toBank" v-model="bankMessage.bank_name" label="银行" label-width="180" input-align="right" placeholder="请选择银行" disabled right-icon="arrow-right">
			</u-field>
			<u-field v-model="bankMessage.kai_address" label="开户行" label-width="180" input-align="right" placeholder="请输入开户行">
			</u-field>
			<u-field v-model="bankMessage.number" label="银行卡号" label-width="180" input-align="right" placeholder="请输入银行卡号">
			</u-field>
			<u-field v-model="bankMessage.mobile" label="银行预留手机号" label-width="200" :border-bottom="false" input-align="right" placeholder="请输入预留手机号">
			</u-field>
		</view>
		
		<!-- <u-tabs active-color="#EFE0C0" inactive-color="#fff" bg-color="transparent" :list="list" :is-scroll="false"
			:current="current" @change="change"></u-tabs> -->
		<!-- <view class="">
			<u-field v-model="captcha" label="验证码" placeholder="请填写验证码">
				<u-button size="mini" slot="right" :custom-style="customStyle" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		</view> -->
		<!-- <view class="" v-if="current == 0">
			<u-field v-model="name" label="微信账号" label-width="180" placeholder="请输入微信账号">
			</u-field>
			<view class="mtb-20 ml-30"> 请上传微信收款码 </view>
			<image v-if="image" :src="image" mode="" class="upImg" @click="chooseImg"></image>
			<image src="../../static/upImg.png" mode="" v-else class="upImg" @click="chooseImg"></image>
			<u-field v-model="account" @input="changeReal" label="提现金额" label-width="180" placeholder="请输入提现金额" />
			<view class="tips mt-20 size-20 ml-30 flex">
				<view>可用余额:{{ walletAccount }}</view>
				<view>手续费:{{ withdrawConfig.rate }}%</view>
			</view>
			<view class="flex flex-between mt-40 ml-30">
				<view class=""> 实际到账 </view>
				<view class="bold">
					{{ realtyMoney }}
				</view>
			</view>
		</view> -->

		<!-- <view class="" v-if="current == 1">
			<u-field v-model="name" label="支付宝账号" label-width="180" placeholder="请输入支付宝账号">
			</u-field>
			<view class="mtb-20 ml-30"> 请上传支付宝收款码 </view>
			<image v-if="image" :src="image" mode="" class="upImg" @click="chooseImg"></image>
			<image src="../../static/upImg.png" v-else mode="" class="upImg" @click="chooseImg"></image>
			<u-field v-model="account" @input="changeReal" label="提现金额" label-width="180" placeholder="请输入提现金额" />
			<view class="tips mt-20 size-20 ml-30 flex">
				<view>可用余额:{{ walletAccount }}</view>
				<view>手续费:{{ withdrawConfig.rate }}%</view>
			</view>
			<view class="flex flex-between mt-40 ml-30">
				<view class=""> 实际到账 </view>
				<view class="bold">
					{{ realtyMoney }}
				</view>
			</view>
		</view> -->

		<!-- <view class="" v-if="current == 2">
      <u-field
        label="银行名称"
        label-width="180"
        placeholder="请输入银行名称"
      >
      </u-field>
      <u-field
        label="银行卡号"
        label-width="180"
        placeholder="请输入银行卡号"
      >
      </u-field>
      <u-field
        label="开户人"
        label-width="180"
        placeholder="请输入开户人姓名"
      >
      </u-field>

      <u-field
        @input="changeReal"
        label="提现金额"
        label-width="180"
        placeholder="请输入提现金额"
      />

      <view class="tips mt-20 size-20 ml-30 flex">
        <view>可用余额:{{ walletAccount }}</view>
        <view>手续费:{{ withdrawConfig.rate }}%</view>
      </view>
      <view class="flex flex-between mt-40 ml-30">
        <view class=""> 实际到账 </view>
        <view class="bold">
          {{ realtyMoney }}
        </view>
      </view>
    </view> -->

		<!-- <view class="mt-20 size-20 ml-30 gray-2">
			<view class="mb-20">提现最小值:{{ withdrawConfig.min }}</view>
			<view class="mb-20">提现最大值:{{ withdrawConfig.max }}</view>
			<view v-html="withdrawConfig.content" class="mb-20"></view>
		</view> -->
		<!-- <u-button type="primary" class="mt-100 drawBtn" @click="submitWithdraw" hover-class="none">确认提现</u-button> -->
		<view class="ptb-40 mlr-30">
			<button class="default-button" @click="submitWithdraw">确认提现</button>
		</view>
	</view>
</template>

<script>
	import tab from "../../components/tab.vue";
	import {
		upload
	} from "../../common/common.js";
	export default {
		components: {
			tab,
		},
		data() {
			return {
				realtyMoney: 0, //实际
				account: "",
				name: "",
				image: "",
				phone:'',
				
				list: [
					// {
					// 	name: "微信",
					// 	image:'/static/weixin.png',
					// 	type:1
					// },
					{
					  name: "银行卡",
						image:'/static/yinhangka.png',
						type:3
					},
					{
						name: "支付宝",
						image:'/static/zhifubao.png',
						type:2
					}
				],
				from:{
					type:2,
					account: '',//提现金额
					name: '',//提现账户
					image: '',//提现照片
					captcha:'',//验证码
					phone:'',//电话
					nickname:'',//姓名
					bank_id:'',//银行卡id
				},
				bankMessage:{},//
				current: 2,
				captcha: '',
				walletAccount: 0,
				codeText: '发送验证码',
				withdrawConfig: {}, //配置
				customStyle: {
					background: '#303143', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#FFFFFF',
					width:'190rpx',
					height:'60rpx',
					borderColor:'#303143',
					borderRadius:'30rpx'
				}
			};
		},
		onShow() {
			if (uni.getStorageSync('bank')) {
				this.from.bank_id = JSON.parse(uni.getStorageSync('bank')).id
				this.bankMessage = JSON.parse(uni.getStorageSync('bank'))
			}
			this.getUserInfo()
		},
		onLoad() {
			// 余额
			this.$http("api/account/account").then((res) => {
				this.walletAccount = res.account;
			});
			// // 配置
			this.$http("api/draw/configDraw").then((res) => {
				this.withdrawConfig = res;
			});
			this.$http('api/user/userInfo').then(res => {
			  this.phone = res.phone
			})
		},
		methods: {
			changeType (type) {
				this.from.type = type
				this.current = type
			},
			getUserInfo () {
				this.$http('api/user/userInfo').then(res => {
				  this.from.phone = res.phone
				})
			},
			toBank () {
				uni.navigateTo({
					url:'/pages/my/bindBank?type=1'
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (!this.from.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('api/login/sendCode',{
						phone:this.phone,
						type:3
					},'GET').then(res=>{
						uni.showToast({
							title:'发送成功'
						})
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 头部按钮
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: "./withdrawRecord",
				});
			},
			// 展示实际到账
			changeReal(e) {
				let account = e;
				this.realtyMoney = e * (1 - this.withdrawConfig.rate / 100);
			},
			change(e) {
				this.current = e;
			},
			submitWithdraw() {
				
				if (!this.from.account) return uni.showToast({
					title:'请输入提现金额',
					icon:'none'
				})
				if (!this.from.nickname) return uni.showToast({
					title:'请输入姓名',
					icon:'none'
				})
				
				if (this.current != 3) {	
					if (!this.from.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					if (!this.from.captcha) return uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					if (!this.from.name) return uni.showToast({
						title:'请输入' + (this.current == 0 ? '微信' : '支付宝') + '账号!',
						icon:'none'
					})
					if (!this.from.image) return uni.showToast({
						title:'请上传' + (this.current == 0 ? '微信' : '支付宝') + '收款码!',
						icon:'none'
					})
				} else {
					if (!this.from.bank_id) return uni.showToast({
						title:'请选择银行卡',
						icon:'none'
					})
				}
				
				
				
				
				
				
				// this.from.type = this.list[this.current].type
				// this.from
				this.$http(
					"api/draw/draw", this.from,
					"POST"
				).then((res) => {
					uni.showToast({
						title: "提交成功，请等待审核!",
					});
					this.from.account = ''
					this.from.name = ''
					this.from.image = ''
					this.from.captcha = ''
					this.from.phone = ''
					this.from.nickname = ''
					setTimeout(() => {
						uni.navigateTo({
							url: "./withdrawRecord",
						});
					}, 500);
				}).catch(err=>{
					console.log(err);
				})
			},
			chooseImg() {
				upload().then((data) => {
					this.from.image = data.path;
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	.bg-1 {
		background-color: #f5f5f5;
	}
	page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
	.deposit-head {
		background: #fff;
		border-radius: 44rpx;
		.deposit-head-li {
			flex: 1;
			height: 88rpx;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
			text {
				color: #3c3c3c;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.active {
			
			background: linear-gradient(90deg, #EEA634, #DE2D32);
			border-radius: 44rpx;
			text {
				color: #fff;
			}
		}
	}
	
	.upImg {
		width: 120rpx;
		height: 120rpx;
		margin-left: 30rpx;
	}

	.tips {
		color: #efe0c0;
	}

	.drawBtn {
		position: absolute;
		z-index: 10;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	/deep/ .u-field {
		color: #7d7d7d !important;
		font-size: 26rpx;
		padding: 30rpx 0 !important;
	}

	.default-button {
		color: #fff;
		font-size: 30rpx;
		height: 88rpx !important;
		line-height: 88rpx;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;
		&::after {
			border: none;
		}
	}
	.code-btn {
		&::after {
			border: none;
		}
	}
</style>
